import CommonModal from '@/pages/OrderModule/common/components/CommonModal/modal';
import CommonTable from '@/components/CommonTable';
import SubTitle from '@/pages/OrderModule/common/components/SubTitle';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd';
import { useState } from 'react';
import {
	addressExampleData1,
	addressExampleData2,
	addressExampleData3,
	fieldsExplanation,
	rulesExplanation,
} from '../helpers/constant';
import styles from '../index.module.less';


const AddressTips = ({ }) => {

	const [visible, setVisible] = useState(false);

	const TableProps1 = {
		bordered: true,
		data: addressExampleData1.data,
		columns: addressExampleData1.columns,
	}

	const TableProps2 = {
		bordered: true,
		data: addressExampleData2.data,
		columns: addressExampleData2.columns,
	}

	const TableProps3 = {
		bordered: true,
		data: addressExampleData3.data,
		columns: addressExampleData3.columns,
	}

	return (
		<>
			<Space direction="vertical" size={28} style={{ marginTop: '-42px' }}>
				<SubTitle title="规则说明" as="s2" symbol />
				<div className={styles['text-box']}>
					{rulesExplanation.map((text, index) => (
						<div key={index}>{text}</div>
					))}
				</div>
				<SubTitle title="字段说明" as="s2" symbol />
				<div className={styles['text-box']}>
					{fieldsExplanation.map((text, index) => {
						let questionNode = null;
						if (text.includes('收货地址')) {
							questionNode = <QuestionCircleOutlined onClick={() => setVisible(true)} style={{ marginLeft: 8, cursor: 'pointer', color: '#B1B7C3' }} />;
						}
						return (
							<div key={index}>
								{text}
								{questionNode}
							</div>
						);
					})}
				</div>
			</Space>
			<CommonModal
				open={visible}
				width={747}
				onCancel={() => setVisible(false)}
				title="收货地址表格填写示例"
				footer={
					<Button onClick={() => setVisible(false)} type="primary">
						知道了
					</Button>
				}
			>
				<Space direction="vertical" size={16}>
					<SubTitle title="示例1" as="s2" symbol />
					<CommonTable {...TableProps1} />
					<SubTitle title="示例2" as="s2" symbol />
					<CommonTable {...TableProps2} />
					<SubTitle title="示例3" as="s2" symbol />
					<CommonTable {...TableProps3} />
				</Space>
			</CommonModal>
		</>
	);
};

export default AddressTips;
